<template>
  <div style="height: 100%">
    <el-container v-if="hasPerm" style="height: 100%;" class="dealBaseHome fundBaseHome">
      <el-header class="app-header">
        <div class="titlebar">
          <div class="titlebar-title">
            <div class="title">
              <div class="tit">
                <el-button class="tipText" type="text">
                  <p style="width:100%;"> {{ thisFundName }}</p>
                </el-button>
              </div>

              <div class="header-msg">
                <div v-for="(item, index) in dataList" :key="index" class="content">
                  <div class="text">
                    <el-tooltip placement="bottom">
                      <div slot="content">
                        <span v-for="info in item.remark" :key="info">
                          {{ info }}<br>
                        </span>
                      </div>
                      <el-button class="tipText" type="text"> {{ item.name }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text">{{ item.value }}</div>
                </div>
              </div>
              <!-- 头部菜单-->
              <div class="tab-change fund-tab-change">
                <Internationalization v-show="thisFundName === '国际化'" />
              </div>
              <div class="btns">
                <!-- 关注 -->
                <Focus :source-id="busId" :source-name="thisFundName" focus-type="fund" />
                <backTop />
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <div v-loading="loading" class="page-component__scroll">
        <fullView
          ref="fullView"
          :bus-id="this.$route.query.id"
          bus-type="spv"
          :child-left-menu="menuList"
          :bus-name="thisFundName"
          :default-active="defaultActive"
        />
      </div>
    </el-container>
    <not-fund v-else bus-type="fund" :person-charge="personChargeName" />
  </div>
</template>

<script>
import { childMenuList	} from '@/api/system/menu'
import { getKeyInformation } from '@/api/fund/fundBase'
import { moneyFormat } from '@/utils/ruoyi'
import fullView from '@/components/fullView'
import Focus from '@/components/Focus'
import { getPermission } from '@/api/system/dealRole/dealRole'
import NotFund from '@/views/error/deal_401.vue'
import { getConfigKey } from '@/api/system/config'
export default {
  components: {
    NotFund,
    fullView,
    Focus
  },
  data() {
    return {
      menuList: [],
      loading: false,
      cur: '',
      childLeftMenu: [],
      dataList: [],
      // 基金名称
      thisFundName: undefined,
      busId: this.$route.query.id,
      hasPerm: true,
      personChargeName: '',
      formConfig: {},
      formConfigId: {},
      defaultActive: ''
    }
  },
  created() {
    this.busId = this.$route.query.id
     getConfigKey('fund_base_spv_form').then(response => {
      this.formConfig = response
    })
    getConfigKey('fundSpvTempletId').then(response => {
      this.formConfigId = response
    })
  },
  mounted: function() {
    this.headLoading()
  },
  methods: {
    changeMiniMenu(el, val) {
      if (el.target.tagName === 'INPUT') return
      this.load(val)
    },
    // 头部数据
    headLoading() {
      this.loading = true
      this.dataList = []
      getKeyInformation(this.$route.query.id).then(response => {
        // 查询基金菜单
        this.getMenuList(response.data.fundStatus)
        // 基金名称
        this.thisFundName = response.data.fundName
        // 浏览器标题
        document.title = response.data.fundName

        this.personChargeName = response.data.personChargeName

        if (response.data.fundStatus === 'NS') {
          this.dataList = []
        } else {
          // 总实缴金额
          var accumulatedPaidMount = response.data.accumulatedPaidMount
          // 总认缴金额
          var subscribedAmount = response.data.subscribedAmount
          // 实际投资金额
          var amountInvestmentFact = response.data.amountInvestmentFact
          // 累计收益
          var accumulatedIncome = response.data.accumulatedIncome

          var remark1 = [this.$t('所有出资人的认缴总额')]
          var remark2 = [this.$t('所有出资人的实缴总额')]
          var remark3 = [this.$t('当前基金所投项目的金额总数')]
          var remark4 = [this.$t('基金现金流中'), this.$t('以 "实际现金流", "流入", "收益"'), this.$t('为条件计算出的的总金额')]
          var remark5 = [this.$t('根据现金流自动计算')]
          const unit = this.$t('金额单位')
          var data = [
            { name: this.$t('认缴总额') + unit, remark: remark1, value: moneyFormat(subscribedAmount, 'w') },
            { name: this.$t('实缴总额') + unit, remark: remark2, value: moneyFormat(accumulatedPaidMount, 'w') },
            { name: this.$t('在投金额') + unit, remark: remark3, value: moneyFormat(amountInvestmentFact, 'w') },
            { name: this.$t('累计收益') + unit, remark: remark4, value: moneyFormat(accumulatedIncome, 'w') },
            { name: 'IRR', remark: remark5, value: response.data.latestIrr }
          ]
          this.dataList = data
        }

        this.loading = false
      })
    },
    // 获取基金菜单
    getMenuList() {
      var menuKey = 'spv_list'
      // var menuK = 'fund_process'
      // 菜单列表
      childMenuList(menuKey).then(response => {
        getPermission(this.busId, menuKey, menuKey).then(res => {
          var permissions = JSON.parse(JSON.stringify(this.$store.state.user.permissions))
          if (res.data && res.data.hasPerm) {
            res.data.notHasPermi.forEach(item => {
              permissions.forEach((p, i) => {
                if (item === p) {
                  permissions.splice(i, 1)
                }
              })
            })
            res.data.hasPerm.forEach(perm => {
              if (perm) {
                permissions.push(perm)
              }
            })
            this.$store.commit('SET_PERMISSIONS', permissions)

            this.menuList = res.data.menus
            this.hasPerm = this.menuList.length > 0
          } else {
            this.menuList = response.rows
          }
          this.defaultActive = this.menuList[0].id
          this.updateComponentName(this.menuList)
          // 默认选中第一个菜单
          // this.menuList.forEach(v => {
          //   if (v.menuKey === menuK) {
          //     this.active(v.menuKey)
          //     this.childLeftMenu = v.children
          //   }
          // })
          if (!this.isEmpty(this.menuList)) {
            this.active(this.menuList[0].menuKey)
            this.childLeftMenu = this.menuList[0].children
          }
        })
      })
    },
    // 图表
    active(item) {
      this.cur = item
      this.load(item)
    },
    loadData(defaultPath) {
      this.$nextTick(() => {
        if (this.$refs.fullView?.importFormPath !== undefined) {
          this.$refs.fullView.importFormPath(defaultPath)
          if (defaultPath) {
            this.$refs.fullView.$refs.asideMenu.activeIndex = ''
          }
        }
      })
    },
    load(val) {
      this.menuList.forEach(v => {
        if (v.menuKey === val) {
          this.childLeftMenu = v.children
        }
      })
    },
    // 根据系统变量切换表单配置页面
    async updateComponentName(menuList) {
      console.log(this.formConfig.msg, 'configconfig')
      if (this.formConfig.msg !== 'configForm') {
        return
      }
      for (let i = 0; i < menuList.length; i++) {
        const menuItem = menuList[i]
        if (menuItem.component === 'fund/base/fundBaseSpvForm') {
          menuItem.component = 'system/desform/release/onlineTemplate?queryId=' + this.formConfigId.msg
        }
        if (menuItem.children && menuItem.children.length > 0) {
          this.updateComponentName(menuItem.children)
        }
      }
    }

  }
}
</script>

<style scoped>
.imageTitle{
  float: left;
  width: 50px;
  height: 100%;
  margin-right: 20px;
}
.fund-header i{
  border: 0px solid;
  border-radius: 0;
  padding: 0px;
  font-size: 1px;
  cursor: pointer;
  position: inherit;
  right: 0px;
  top: 0;
  margin-top: 0;
}
</style>
